<script lang="ts" setup>
import { Folder, Search } from '@element-plus/icons-vue'
import { topicContent } from '~/content/topic'
import { BranchIcon, SwitchIcon } from '~/components/icons'
import { methodColorClass } from '~/utils/config'

// const props = defineProps({})
const emit = defineEmits(['handleClick', 'setBreadList'])
onMounted(() => {})

const dataList: any = ref([])
async function getData() {
  dataList.value = [{ id: 1001, name: '模块', isLeaf: false, utime: '2025-01-20 16:19:00', html: '' }]
  // 设置默认选中
  setDefault()
}

const treeRef = ref()
const defultExpand: any = ref([])
async function setDefault() {
  let defaultData: any = {}
  defultExpand.value = [1001]
  setTimeout(() => {
    defaultData = { id: 1002 }
    nextTick(() => {
      treeRef.value!.setCurrentKey(defaultData.id)
      const node = treeRef.value!.getNode(defaultData.id)
      handleNodeClick(defaultData, node)
      if (node) {
        handleNodeClick(node.data, node)
      }
      else {
        handleNodeClick(defaultData, {})
      }
    })
  }, 600)
}


const activeData: any = ref({})
const activeKey = ref('')
const breadList: any = ref([])
function handleClick(row: any) {
  activeData.value = row
  emit('handleClick', row)
}

const keyword = ref('')

async function handleNodeClick(data: any, node: any) {
  handleClick(data)
  // 获取导航列表
  getBreadList(data, node)
}

function getBreadList(data: any, node: any) {
  const arr = []
  arr.push({ id: data.id, name: data.name, data, node })
  let last = node.parent
  for (let i = 0; true; i++) {
    if (!last || !last.parent) {
      // 跳出循环
      break
    }
    else {
      arr.push({ id: last.data.id, name: last.data.name, data: last.data, node: last })
    }
    last = last.parent
  }
  breadList.value = arr.reverse()

  emit('setBreadList', breadList.value)
}

const defaultProps = {
  children: 'children',
  label: 'name',
  isLeaf: (data: any) => {
    // 明确返回是否为叶子节点
    return data.isLeaf
  },
}
async function loadNode(node: any, resolve: (data: any) => void) {
  if (node.level === 0) {
    getData()
    return
  }
  if (node.level === 1) {
    const data: any = [
      { id: 1002, name: 'ping', html: topicContent, utime: '2025-01-20 16:19:00', method: 'POST', isLeaf: true },
    ]
    resolve(data)
    return
  }
  resolve([])
}

const projectList = ref([
  { id: 1001, name: '工程项目' },
])
const projectActive: any = ref(projectList.value[0])
function handleProject(row: any) {
  projectActive.value = row
}
</script>

<template>
  <aside class="aside-container h-full min-w-70 flex flex-col overflow-auto pr-4 text-sm color-[#000a1a]">
    <header class="text-xl font-bold">
      我的文档
    </header>
    <nav class="my-3">
      <div class="mb-2.5 h-9 flex items-center justify-between border-1 border-[#e1e1e1] rounded p-1">
        <div class="flex items-center">
          <div class="h-7 flex items-center rounded bg-[#f5f5f5] px-1.5 color-[#6e737b]">
            <BranchIcon />
            <span>工程</span>
          </div>
          <div class="ml-2.5">
            {{ projectActive.name }}
          </div>
        </div>
        <el-dropdown max-height="360px">
          <div class="mr-2 cursor-pointer color-[#6e737b]">
            <SwitchIcon />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <section class="px-1">
                <el-dropdown-item v-for="(item, index) in projectList" :key="index">
                  <span class="max-w-50 w-full text-ellipsis" @click="handleProject(item)">{{ item.name }}</span>
                </el-dropdown-item>
              </section>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-input
        v-model="keyword"
        style="width: 100%; height: 36px;"
        placeholder="输入关键字搜索"
        :prefix-icon="Search"
      />
    </nav>
    <main class="flex-1">
      <ElTree
        ref="treeRef"
        node-key="id"
        :current-node-key="activeKey"
        :data="dataList"
        :props="defaultProps"
        :default-expand-all="false"
        :load="loadNode"
        :default-expanded-keys="defultExpand"
        :expand-on-click-node="false"
        lazy
        @node-click="handleNodeClick"
      >
        <template #default="{ data }">
          <div
            v-if="data.isLeaf"
            class="h-full w-full flex items-center justify-between"
          >
            <div class="h-full flex items-center text-ellipsis color-[#30353e]" :title="data.name">
              {{ data.name }}
            </div>
            <div class="h-full flex items-center font-bold" :class="data.method ? methodColorClass[data.method.toLowerCase()] : ''">
              {{ data.method }}
            </div>
          </div>
          <div v-else class="h-full w-full flex items-center">
            <span class="mr-1 flex items-center">
              <el-icon size="16" color="#216ef2"><Folder /></el-icon>
            </span>
            <span class="h-full flex items-center text-ellipsis">{{ data.name }}</span>
          </div>
        </template>
      </ElTree>
    </main>
  </aside>
</template>

<style lang="scss" scoped>
@use '~/assets/custom.scss';
</style>

<style lang="scss" scoped>
.aside-container :deep() .el-input__wrapper {
  background: #f9f9f9;
}

.aside-container :deep() .el-tree {
  height: 100%;
  overflow-y: auto;
}

.aside-container :deep() .el-tree-node__content {
  height: 36px;
  display: flex;
  align-items: center;
  color: #000a1a;
  font-size: 14px;
  border-radius: 6px;
  padding: 0 4px !important;
}

.aside-container :deep() .el-tree-node__children {
  .el-tree-node__content {
    padding-left: 8px !important;
    padding-right: 16px !important;
  }
}

.aside-container :deep() .el-tree-node__content:hover {
  background: #ffffff;
}
.aside-container :deep() .el-tree-node.is-current > .el-tree-node__content {
  background: #ececec;
}
</style>
